<template>
    <view>

        <!-- 自定义卡片轮播 -->
        <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" previous-margin="60rpx" next-margin="60rpx" @change="currentChange">
            <swiper-item v-for="(item,index) in list" :key="index">
                <view class="main-card w95" :class="currentIndex == index ? 'current-card' : 'side-card'">
                    <view class="local-pic flex-center-align">
						<img :src="item" alt="" />
					</view>
                    <!-- <view class="swiper-item-info bold fz30 ml20 mt20">{{item.userInfo}}</view> -->
                </view>
        	</swiper-item>
        </swiper>

    </view>
</template>

<script>
	import A1 from '@/static/icon/A1.jpg'
	import A2 from '@/static/icon/A2.jpg'
	import A3 from '@/static/icon/A3.jpg'
	import A4 from '@/static/icon/A4.jpg'
	export default {
		data() {
			return {
				indicatorDots: true, // 是否显示面板指示点
				autoplay: false, // 是否自动切换
				interval: 2000, // 自动切换时间间隔
				duration: 500, // 滑动动画时长
				A1,
				A2,
				A3,
				A4,
				list:[],
				currentIndex: 0, // 当前小标
			}
		},
		methods: {
			// 轮播点击
			currentChange(e) {
				this.currentIndex = e.detail.current
			}
		},
		created() {
			this.list.push(this.A1)
			this.list.push(this.A2)
			this.list.push(this.A3)
			this.list.push(this.A4)
		}
	}
</script>
<style lang="scss" scoped>
     // @import url('@/static/css/reset.css');
     .swiper {
	    height: 820rpx;
 
		.main-card {
			margin: 50rpx auto;
			border-radius: 30rpx;
			// background-color: #fff;
			padding: 20rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
 
			.local-pic {
				width: 100%;
				height: 390rpx;
				border-radius: 30rpx;
				background-color: #eb6966;
			}
 
			.about-info {
				line-height: 40rpx;
			}
		}
 
		.current-card {
			height: 700rpx;
			transition: all 0.6s;
		}
 
		.side-card {
			height: 640rpx;
			margin-top: 80rpx;
			transition: all 0.6s;
			}
		}
</style>